import $ from 'jquery';

// 表单提交处理
function handleSubmit(e) {
  e.preventDefault();
  const formData = {
    name: $('#contact-name').val(),
    email: $('#contact-email').val(),
    message: $('#contact-message').val()
  };

  // 在实际应用中，这里会发送 API 请求
  // 这里我们只是模拟一个成功响应
  $('.contact-form').hide();
  $('.success-message').show();
  
  // 清空表单
  $('#contact-form')[0].reset();
}

export function renderContact() {
  const template = `
    <div class="page contact-page">
      <h1>联系我们</h1>
      <div class="contact-content">
        <div class="contact-info">
          <h3>联系方式</h3>
          <p><i class="icon-location"></i> 地址：示例街道123号</p>
          <p><i class="icon-phone"></i> 电话：(123) 456-7890</p>
          <p><i class="icon-email"></i> 邮箱：example@jquery-spa.com</p>
        </div>
        <div class="contact-form">
          <h3>发送消息</h3>
          <form id="contact-form">
            <div class="form-group">
              <label for="contact-name">姓名</label>
              <input type="text" id="contact-name" required>
            </div>
            <div class="form-group">
              <label for="contact-email">邮箱</label>
              <input type="email" id="contact-email" required>
            </div>
            <div class="form-group">
              <label for="contact-message">消息</label>
              <textarea id="contact-message" rows="5" required></textarea>
            </div>
            <button type="submit" class="btn">发送消息</button>
          </form>
        </div>
        <div class="success-message" style="display: none;">
          <h3>消息已发送！</h3>
          <p>感谢您的联系。我们会尽快回复您。</p>
          <button class="btn" onclick="$('.contact-form').show(); $('.success-message').hide();">
            发送新消息
          </button>
        </div>
      </div>
    </div>
  `;

  // 返回模板并在下一个事件循环中绑定事件
  setTimeout(() => {
    $('#contact-form').on('submit', handleSubmit);
  }, 0);

  return template;
}